<template>
  <ele-page flex-table hide-footer>
    <!-- 搜索表单 -->
    <mt-search @search="reload" />
    <ele-card :body-style="{ paddingTop: '8px' }" flex-table>
      <!-- 表格 -->
      <ele-pro-table
        hide-footer
        ref="tableRef"
        row-key="deptId"
        :columns="columns"
        v-model:selections="selections"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        highlight-current-row
        :export-config="{ fileName: '摄像机数据' }"
        :default-expand-all="true"
        :pagination="true"
        cache-key="systemDeptTable"
      >
        <!-- 左上角新建 删除插槽 -->
        <template #toolbar>
          <el-button
            type="primary"
            class="ele-btn-icon"
            :icon="PlusOutlined"
            v-permission="'system:dept:add'"
            @click="openEdit()"
          >
            新建
          </el-button>
        </template>
        <template #cameraName="{ row, $index }">
           <el-link
              type="primary"
              :underline="false"
              @click="openEdit(row,'info')"
              >{{row.cameraName}}
            </el-link>
        </template>
        <!-- 操作栏插槽 -->
        <template #action="{ row, $index }">
          <el-space>
            <el-link
              type="primary"
              :underline="false"
              @click="openEdit(row,'edit')"
              icon="Edit"
              >修改
            </el-link>

            <el-divider direction="vertical" style="margin: 0" />
            <el-popconfirm
              :width="190"
              title="确定要删除此用户吗？"
              placement="top-end"
              @confirm="remove(row)"
            >
              <template #reference>
                <el-link icon="Delete" type="danger" :underline="false"
                  >删除
                </el-link>
              </template>
            </el-popconfirm>
          </el-space>
        </template>
      </ele-pro-table>
    </ele-card>
    <!-- 编辑弹窗 -->
    <mt-edit
      v-model="showEdit"
      :data="current"
      :type="handlerType"
      @done="reload"
    />
  </ele-page>
</template>

<script setup>
  import { ref, h } from 'vue';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import { PlusOutlined, DeleteOutlined } from '@/components/icons';
  import MtSearch from './components/mt-search.vue';
  import MtEdit from './components/mt-edit.vue';
  import { removeDept } from '@/api/system/dept';

  defineOptions({ name: 'SystemDept' });

  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = ref([
    {
      type: 'selection',
      columnKey: 'selection',
      width: 50,
      align: 'center',
      fixed: 'left'
    },
    {
      type: 'index',
      label: '序号',
      columnKey: 'index',
      width: 60,
      align: 'center',
      fixed: 'left'
    },
    {
      prop: 'cameraName',
      label: '摄像机名称',
      minWidth: 160,
      slot:'cameraName'
    },
    {
      prop: 'cameraNumber',
      label: '摄像机编号',
      minWidth: 160
    },
    {
      prop: 'cameraBrach',
      label: '设备品牌',
      minWidth: 160
    },
    {
      prop: 'cameraModel',
      label: '设备型号',
      align: 'center',
      minWidth: 90
    },
    {
      prop: 'cameraType',
      label: '摄像机类型',
      align: 'center',
      minWidth: 90
    },

    {
      columnKey: 'action',
      label: '操作',
      width: 180,
      align: 'center',
      slot: 'action',
      hideInPrint: true,
      hideInExport: true
    }
  ]);

  /** 当前编辑数据 */
  const current = ref({
    cameraName: 123
  });
  const handlerType = ref('');
  /** 是否显示编辑弹窗 */
  const showEdit = ref(false);

  /** 上级菜单id */
  const parentId = ref();

  /** 表格选中数据 */
  const selections = ref([]);

  /** 表格数据源 */
  const datasource = async ({ where }) => {
    // return toTree({
    //   data,
    //   idField: 'deptId',
    //   parentIdField: 'parentId'
    // });
    return [
      {
        id: 0,
        cameraName: '摄像机名称',
        cameraNumber:'sxj001',
        cameraBrach: 'XXX品牌',
        cameraType: 'AL25615',
        
        cameraModel: '指针'
      }
    ];
  };

  /** 刷新表格 */
  const reload = (where) => {
    tableRef.value?.reload?.({ where });
  };

  /** 打开编辑弹窗 */
  const openEdit = (row = {}, type = '') => {
    current.value = row ?? null;
    handlerType.value = type;
    showEdit.value = true;
  };

  /** 删除单个 */
  const remove = (row) => {
    ElMessageBox.confirm(
      `是否确认删除名称为“${row.deptName}”的数据项？`,
      '系统提示',
      { type: 'warning', draggable: true }
    )
      .then(() => {
        const loading = EleMessage.loading({
          message: '请求中..',
          plain: true
        });
        removeDept(row.deptId)
          .then(() => {
            loading.close();
            EleMessage.success('删除成功');
            reload();
          })
          .catch((e) => {
            loading.close();
            EleMessage.error(e.message);
          });
      })
      .catch(() => {});
  };
</script>
